<!--
 * @Author: 花香蝶自来 1026583651@qq.com
 * @Date: 2024-07-14 19:58:54
 * @LastEditors: 花香蝶自来 1026583651@qq.com
 * @LastEditTime: 2024-07-14 20:24:29
 * @FilePath: /driver/pagesall/orderxq/components/card2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view class="xqitemcard2">
		<view class="title"> 订单信息 </view>
		<view v-for="(item,key) in list" class="item" :key="key">
			<view class="label">{{ item.label }}</view>
			<view class="value" :class="{jevalue:item.jevalue}">{{ item.value||'' }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
		},
		data() {
			return {
				offset: [-3, -6],
				background: "#F2E7E0",
				value: 5,
				btnstyle: {
					height: "72rpx",
					fontSize: "26rpx",
					lineHeight: "30rpx",
				},
				status: "loadmore",
			};
		},
		computed: {
			list() {
				return [{
						label: "运单编号",
						value: this.item.id
					},
					{
						label: "运费",
						value: this.item.totalFreight ? "¥" + this.item.totalFreight : '',
						jevalue: true
					},
					{
						label: "搬运费",
						value: this.item.totalHandlingFees ? "¥" + this.item.totalHandlingFees : '',
						jevalue: true
					},

					{
						label: "备注",
						value: this.item.remark
					}
				]
				// 运费 totalFreight
				// totalHandlingFees 搬运费
				// remark备注
			}
		},
		methods: {
			call() {
				if (!this.item.driverPhoneNumber) {
					this.$u.toast("未预留电话");
					return;
				}
				uni.makePhoneCall({
					phoneNumber: this.item.driverPhoneNumber, //仅为示例
				});
			},
			ontap() {
				uni.navigateTo({
					url: "/pagesall/orderxq/orderxq?id=" + this.item.id,
				});
			},
		},
	};
</script>

<style lang="scss">
	.xqitemcard2 {
		margin: 16rpx 18rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;

		.title {
			height: 100rpx;
			font-size: 30rpx;
			color: #181a1e;
			display: flex;
			align-items: center;
			padding-left: 24rpx;

			&::before {
				content: "";
				width: 6rpx;
				height: 20rpx;
				background: #DC2626;
				margin-right: 10rpx;
				border-radius: 6rpx;
			}
		}

		.item {
			height: 70rpx;
			padding: 0 24rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;

			.label {
				min-width: 112rpx;
				text-align-last: justify;
				color: #838589;
			}

			.value {
				color: #181A1E;
			}

			.jevalue {
				color: #DC2626;
				font-weight: bold;
				font-size: 38rpx;
			}
		}
	}
</style>